import { useVModel } from "@vueuse/core";
import { defineComponent, Teleport } from "vue";

export default defineComponent({
  props: {
    show: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
      default: "弹窗",
    },
    width: {
      type: Number,
      required: false,
      default: 1000,
    },
    form: {
      type: Object,
    },
  },
  setup(props, { emit }) {
    const show = useVModel(props, "show", emit);

    const onCancel = () => {
      show.value = false;
    };

    return () => (
      <Teleport to="#app">
        <a-modal
          title={props.title}
          visible={show.value}
          footer={null}
          width={props.width}
          maskClosable={false}
          keyboard={false}
          destroyOnClose
          onCancel={onCancel}
        >
          {props.form}
        </a-modal>
      </Teleport>
    );
  },
});
